<template>
  <div class="container-header-margin content">
    <div>
      <a-row>
        <a-col :span="4"></a-col>
        <a-col :span="16">
          <div class="title">教师报名信息填写</div>

          <a-form
            ref="formRef"
            :model="formState"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-row :gutter="20">
              <a-col :span="12">
                <a-form-item class="tname"
                  ref="name"
                  label="姓名"
                  name="name"
                  :labelCol="{ offset: 1 }"
                >
                  <a-input v-model:value="formState.name" />
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item
                  ref="sex"
                  label="性别"
                  name="sex"
                  :labelCol="{ offset: 1 }"
                >
                  <a-radio-group
                    v-model:value="formState.sex"
                    button-style="solid"
                  >
                    <a-radio-button
                      :value="item.dictValue"
                      v-for="item in sexData"
                      :key="item.dictValue"
                    >
                      {{ item.dictLabel }}</a-radio-button
                    >
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="20">
              <a-col :span="24">
                <a-form-item class="department"
                  ref="collegeList"
                  label="部门/所在系"
                  name="collegeList"
                  :labelCol="{ offset: 0 }"
                >
                  <a-cascader
                    v-model:value="formState.collegeList"
                    :options="collegeTreeList"
                    :field-names="{
                      label: 'name',
                      value: 'id',
                      children: 'children',
                    }"
                    placeholder="请选择"
                    @change="handleChangeCollege"
                  />
                </a-form-item>
              </a-col>

              <!-- <a-col :span="12">
                <a-form-item
                  ref="majorList"
                  label="所在系"
                  name="majorList"
                  :labelCol="{ offset: 1 }"
                >
                  <a-cascader
                    v-model:value="formState.majorList"
                    :options="collegeTreeList"
                    :field-names="{
                      label: 'name',
                      value: 'id',
                      children: 'children',
                    }"
                    placeholder="请选择"
                    @change="handleChangeMajor"
                  />
                </a-form-item>
              </a-col> -->
            </a-row>
            <a-row :gutter="20">
              <a-col :span="12">
                <a-form-item
                  ref="title"
                  label="职称"
                  name="title"
                  :labelCol="{ offset: 1 }"
                >
                  <!-- <a-input v-model:value="formState.title" /> -->
                  <a-select
                    v-model:value="formState.title"
                    show-search
                    placeholder="请选择"
                    :options="titleList"
                    :filter-option="filterOption"
                    :field-names="{
                      label: 'dictLabel',
                      value: 'dictValue',
                    }"
                  ></a-select>
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item
                  ref="office"
                  label="职务"
                  name="office"
                  :labelCol="{ offset: 1 }"
                >
                  <a-input v-model:value="formState.office" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="20">
              <a-col :span="12">
                <a-form-item
                  ref="phone"
                  label="手机号"
                  name="phone"
                  :labelCol="{ offset: 1 }"
                >
                  <a-input v-model:value="formState.phone" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  ref="email"
                  label="邮箱"
                  name="email"
                  :labelCol="{ offset: 1 }"
                >
                  <a-input v-model:value="formState.email" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="20">
              <a-col :span="12">
                <a-form-item class="bank"
                  ref="bankNumber"
                  label="银行卡账号"
                  name="bankNumber"
                  extra="获奖必须填写"
                  :labelCol="{ offset: 1 }"
                >
                  <a-input
                    v-model:value="formState.bankNumber"
                    placeholder="建设银行卡"
                  />
                </a-form-item>
              </a-col>
              <!-- <a-col :span="12">
                <a-form-item
                  ref="bank"
                  label="开户行"
                  name="bank"
                  extra="获奖必须填写"
                  :labelCol="{ offset: 1 }"
                >
                  <a-input v-model:value="formState.bank" />
                </a-form-item>
              </a-col> -->
              <a-col :span="12"
                ><a-form-item class="card"
                  ref="identity"
                  label="身份证"
                  name="identity"
                  :labelCol="{ offset: 1 }"
                >
                  <a-input v-model:value="formState.identity" />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="20">
              <a-col :span="24"
                ><a-form-item
                  ref="course"
                  label="主授课程"
                  name="course"
                  :labelCol="{ offset: 1 }"
                >
                  <!-- <a-input v-model:value="formState.course" /> -->
                  <a-textarea
                    v-model:value="formState.course"
                    :maxlength="128"
                    show-count
                  />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item
                  ref="type"
                  label="指导科目"
                  name="type"
                  :labelCol="{ offset: 1 }"
                >
                  <!-- <a-input v-model:value="formState.type" /> -->
                  <a-textarea
                    v-model:value="formState.type"
                    :maxlength="128"
                    show-count
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="20">
              <a-col :span="24"
                ><a-form-item
                  ref="tClass"
                  label="本学期任课班级"
                  name="tClass"
                  :labelCol="{ offset: 1 }"
                >
                  <!-- <a-input v-model:value="formState.tClass" /> -->
                  <a-textarea
                    v-model:value="formState.tClass"
                    :maxlength="128"
                    show-count
                  />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item
                  ref="guidance"
                  label="指导经验"
                  name="guidance"
                  :labelCol="{ offset: 1 }"
                >
                  <!-- <a-input v-model:value="formState.guidance" /> -->
                  <a-textarea
                    v-model:value="formState.guidance"
                    :maxlength="128"
                    show-count
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="20">
              <a-col :span="24">
                <a-form-item
                  ref="remark"
                  label="备注"
                  name="remark"
                  :labelCol="{ offset: 1 }"
                >
                  <a-textarea
                    v-model:value="formState.remark"
                    :maxlength="256"
                    show-count
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <div style="text-align: center">
             <div class="ret">
              <a-button 
                style="float: left"
                size="large"
                @click="jump('/ss/lqb')"
                >返回上一页</a-button
              >
              <a-button
                type="primary"
                size="large"
                @click="onSubmit"
                :loading="loading"
                >{{ formState.id ? "更新报名信息" : "提交报名" }}</a-button
              >
             </div>
             <div class="ret">
              <a-button
                style="margin-left: 10px"
                size="large"
                @click="resetForm"
                >重置填写</a-button
              >
              <a-button
                style="margin-left: 10px"
                size="large"
                danger
                @click="del"
                v-if="formState.id"
                >取消报名</a-button
              >
             </div>
              
            </div>
          </a-form>
        </a-col>
        <a-col :span="4"></a-col>
      </a-row>
    </div>
  </div>
</template>
      
    <script setup>
import { useUserStore } from "@/store/user";
import { SYSYTM_TITLE } from "@/config";
import { reactive, ref, toRaw } from "vue";
import { message, Modal } from "ant-design-vue";
import { handleTree } from "@/utils";
import {
  teacher_bm,
  get_teacher_bm,
  update_teacher_bm,
  delete_bm,
  get_title,
  getCollegeMajor,
  getSex,
} from "@/apis";
const route = useRoute();
const user = useUserStore();
const loading = ref(false);
useSeoMeta({
  title: "教师报名-" + SYSYTM_TITLE,
  description: SYSYTM_TITLE,
  keywords: "白云学院,创新创业网",
  robots: "index, follow",
  canonical: "https://example.com",
});

const titleList = ref([]); // 职称列表
const collegeList = ref([]); // 学院列表
const collegeTreeList = ref([]); // 学院列表
const sexData = ref([]); // 性别列表
const filterOption = (input, option) => {
  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
function jump(path) {
  let router = useRouter();
  router.push({ path: path, query: route.query });
}
function handleChangeCollege(data) {
  console.log(data);
  formState.value.college = data[0];
  if (data.length > 1) {
    formState.value.major = data[1];
  }
}
function handleChangeMajor(data) {
  console.log(data);
  formState.value.major = data[data.length - 1];
}
const formRef = ref();
const labelCol = {
  span: 1,
};
const wrapperCol = {
  span: 23,
};
const formState = ref({
  raceId: "",
  name: "",
  sex: 1,
  college: "",
  major: "",
  title: "",
  office: "",
  phone: "",
  email: "",
  identity: "",
  course: "",
  type: "",
  tClass: "",
  bankNumber: "",
  bank: "",
  guidance: "",
  remark: "",
  collegeList: [],
  majorList: [],
});
const rules = {
  name: [
    {
      required: true,
      message: "请填写姓名",
      trigger: "change",
    },
  ],
  sex: [
    {
      required: true,
      message: "请填写性别",
      trigger: "change",
    },
  ],
  collegeList: [
    {
      required: true,
      message: "请填写部门",
      trigger: "change",
    },
  ],
  majorList: [
    {
      required: true,
      message: "请填写所在系",
      trigger: "change",
    },
  ],
  title: [
    {
      required: true,
      message: "请填写职称",
      trigger: "change",
    },
  ],
  office: [
    {
      required: true,
      message: "请填写职务",
      trigger: "change",
    },
  ],
  tClass: [
    {
      required: true,
      message: "请填写班级",
      trigger: "change",
    },
  ],
  phone: [
    {
      required: true,
      message: "请填写手机号",
      trigger: "change",
    },
    {
      message: "请填写正确手机号",
      trigger: "blur",
      pattern: /^1[3456789]\d{9}$/,
    },
  ],
  email: [
    {
      required: true,
      message: "请填写电子邮箱",
      trigger: "change",
      type: "email",
    },
    {
      message: "请填写正确的电子邮箱",
      trigger: "blur",
      type: "email",
    },
  ],
  identity: [
    {
      required: true,
      message: "请填写身份证号",
      trigger: "change",
    },
    {
      message: "请填写正确的身份证号",
      trigger: "blur",
      pattern:
        /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
    },
  ],
  course: [
    {
      required: true,
      message: "请填写主授课程",
      trigger: "change",
    },
  ],
  type: [
    {
      required: true,
      message: "请填写指导科目",
      trigger: "change",
    },
  ],
  guidance: [
    {
      required: true,
      message: "请填写指导经验",
      trigger: "change",
    },
  ],
};
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log("values", formState.value);
      formState.value.raceId = route.query.id;
      // message.success("参数校验成功");
      loading.value = true;
      const api = formState.value.id
        ? update_teacher_bm(formState.value)
        : teacher_bm(formState.value);
      api
        .then((res) => {
          console.log("res", res);
          loading.value = false;
          if (formState.value.id) {
            message.success("修改成功");
            init();
          } else {
            message.success("报名成功");
            jump("/ss/lqb");
          }
        })
        .catch((error) => {
          loading.value = false;
          console.log("error", error);
          // message.error("报名失败");
        });
    })
    .catch((error) => {
      console.log("error", error);
      // message.error("参数校验不通过");
    });
};
function del() {
  Modal.confirm({
    title: "取消报名",
    content: "确认取消报名吗？",
    okText: "确认",
    cancelText: "取消",
    onOk: () => {
      delete_bm({ raceId: route.query.id, flag: 1 }).then((res) => {
        message.success("取消报名成功");
        jump("/ss/lqb");
      });
    },
  });
}
const resetForm = () => {
  formRef.value.resetFields();
};
function getTitleList() {
  get_title().then((res) => {
    titleList.value = res.rows;
  });
}
function getCollegeMajorList() {
  getCollegeMajor().then((res) => {
    collegeList.value = res.data;
    collegeTreeList.value = handleTree(
      collegeList.value,
      "id",
      "college",
      "children"
    );
  });
}
function init() {
  loading.value = true;
  get_teacher_bm({ raceId: route.query.id })
    .then((res) => {
      loading.value = false;
      if (res.data) {
        formState.value = res.data;
        formState.value.sex =
          formState.value.sex !== null
            ? formState.value.sex + ""
            : formState.value.sex;
        formState.value.collegeList = [];
        if (res.data.college !== null) {
          formState.value.collegeList.push(res.data.college);
        }
        if (res.data.major !== null) {
          formState.value.collegeList.push(res.data.major);
        }
      }
    })
    .catch((error) => {
      loading.value = false;
    });
}
function getSexList() {
  getSex().then((res) => {
    sexData.value = res.rows;
  });
}
getSexList();
getTitleList();
getCollegeMajorList();
init();
</script>
      
  <style lang="less" scoped>

.content {
  min-height: 90vh;
}

.title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;

  margin-top: 20px;
}

@media (max-width: 768px) {
  .ret {
    width: 100%;
    display: flex;
    flex-wrap: wrap; // 允许子元素换行
    justify-content: space-evenly; // 子元素之间的间距均匀分布
    padding: 10px;
  }

  .department {
    width: 362px;
  }

  .bank {
    margin-left: -80px;
    width: 250px;
  }

  .card {
    display: block; // 这将使 .card 元素变为块级元素，占据整行
    width: 240px;
  }
}

</style>